<template>
  <div class="welcome">
    <div class="create">
      <div class="list_item mt20">
        <div class="item_con item_message_box pad12">
          <el-input class="item_con_input input_textarea" type="textarea" :rows="4" v-model="formData.content" placeholder="请输入欢迎语" resize="none" show-word-limit @input="changeWords" />
          <div class="simple_fn">
            <div class="cus_name" @click="insetName">插入客户昵称</div>
            <div class="sele_text" @click="openUpload('1')">选择文本</div>
            <div class="emoj" @click="onFace">😊</div>
            <div class="item_num">{{ formData.content.length }}/1000</div>
          </div>
          <el-scrollbar class="upload_list_box" max-height="135px">
            <ul class="upload_list">
              <li class="upload_item" v-for="item in fileInfo" :key="item.id">
                <img class="file_icon" :src="item.cur_icon" alt="" />
                <div class="file_name">{{ item.name }}</div>
                <img class="del_icon" @click="remove(item)" src="@/assets/image/channel/remove_icon.png" />
              </li>
            </ul>
          </el-scrollbar>
          <el-popover popper-class="pop_select_box" placement="top-start" trigger="hover" :width="360">
            <template v-if="Number(9 - fileList.length) > 0" #reference>
              <div class="upload_btn">
                <el-icon><plus /></el-icon>
                <span class="upload_text">添加图片/视频/音频/文件/链接/收集表/电商</span>
              </div>
            </template>
            <template #default>
              <div class="upload_pop">
                <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="openUpload(item.id)">
                  <img class="item_pop_icon" :src="item.icon" alt="" />
                  <span class="item_pop_name">{{ item.name }}</span>
                </div>
              </div>
            </template>
          </el-popover>
          <!-- 表情管理 -->
          <div class="emoj_box">
            <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
          </div>
        </div>
      </div>

      <div class="prev_box">
        <div class="phone_con">
          <span class="phone-title">欢迎语预览</span>
          <el-scrollbar class="phone_List">
            <Friend :FriendDetail="fileList" />
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 标签弹框 -->
    <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
    <!-- 素材标签 -->
    <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
    <Dialog :appDialog="appDialog">
      <el-table :data="tableData" ref="multipleTable" stripe height="580" style="width: 100%" header-row-class-name="table_header_title" highlight-current-row @current-change="handleCurrentChange">
        <el-table-column width="55">
          <template #default="scope">
            <el-radio v-model="seleItem.id" :label="scope.row.id"><span style="font-size: 0">''</span></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="欢迎语" min-width="220">
          <template v-slot="scope">
            <span class="text">{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="welcome_friend_attachment" min-width="200">
          <template v-slot="scope">
            <template v-for="v in scope.row.welcome_friend_attachment" :key="v.id">
              <!-- // 图片 -->
              <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 1">
                <el-image
                  class="wel_content_file_item"
                  :src="v.media_file.absolute_url || '/static/file/pic.png'"
                  :preview-src-list="bigImgList"
                  :preview-teleported="true"
                  :initial-index="1"
                  @click="BigImage(v.media_file.absolute_url)"
                  style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                >
                  <template #error>
                    <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                  </template>
                </el-image>
              </el-tooltip>
              <!-- 视频 -->
              <el-tooltip :content="v.media_file.name" placement="top" effect="light" v-if="v.type === 2">
                <div class="pay-item" @click="downLoad(v.media_file.absolute_url)">
                  <div class="play"></div>
                  <el-image class="wel_content_file_item" :src="v.media_file.absolute_url || '/static/file/pic.png'" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                    <template #error>
                      <el-image src="/static/file/mov.png" alt=""></el-image>
                    </template>
                  </el-image>
                </div>
              </el-tooltip>
              <!-- 链接 -->
              <el-tooltip v-if="v.type === 3" :content="v.link_title || '暂无标题'" placement="top" effect="light">
                <img class="wel_content_file_item" src="/static/file/link.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </el-tooltip>
              <!-- 音频 -->
              <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 4">
                <img class="wel_content_file_item" src="/static/file/mp3.png" @click="downLoad(v.media_file.absolute_url)" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </el-tooltip>
              <!-- 文件 -->
              <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 5">
                <img class="wel_content_file_item" :src="getSuffixIcon(v.media_file.name)" @click="downLoad(v.media_file.absolute_url)" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
              </el-tooltip>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="send_times" label="消息数量" width="125"> </el-table-column>
        <!-- 部门、员工 -->
        <el-table-column prop="depart" label="生效部门、员工" min-width="150">
          <template v-slot="scope">
            <div class="depart_main">
              {{ scope.row.department.length > 0 ? getSetionId('name', scope.row.department).join('、') : ' ' }}
              {{ scope.row.work_user.length > 0 ? getSetionId('name', scope.row.work_user).join('、') : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="创建人" min-width="150"></el-table-column>
        <el-table-column prop="user_local_department" label="所在部门" min-width="150">
          <template v-slot="scope">
            <span>{{ scope.row.user_local_department && scope.row.user_local_department.length > 0 ? getSetionId('name', scope.row.user_local_department).join('、') : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
        <el-table-column prop="updated_at" label="修改时间" min-width="200"></el-table-column>
        <template #empty>
          <el-empty :image-size="150" description="您还没有创建欢迎语">
            <template #image>
              <img src="/static/noBind.png" alt="" />
              <el-button type="primary" size="small" @click="router.push('/channel/qwbasicoperation/welcomefriend/addWelcomFriend')">创建欢迎语</el-button>
            </template>
          </el-empty>
        </template>
      </el-table>
      <ZWPagination ref="PaginationRef" @submit="getChannelFriendList" />
    </Dialog>
  </div>
</template>

<script setup lang="ts">
  import Phone from '@/components/welcome/Phone.vue'
  import { reactive, ref, defineProps, watch, onMounted } from 'vue'
  import ZWMatericalLib from '@/components/channel/ZWMatericalLib.vue'
  import ZWEmoji from '@/components/ZWEmoji.vue'
  import Friend from './Friend.vue'
  import { getSetionId, IsNotEmpty, getSuffixIcon } from '@/utils/utils'
  import { channelFriendList } from '@/api/channel/qwbase'
  import Dialog from '@/components/Dialog.vue'
  import router from '@/router'
  import { useStore } from '@/store'
  import { ElMessage } from 'element-plus'
  const store = useStore()
  const emit = defineEmits(['submit'])
  const props = defineProps<{
    disabled: {
      // 是否禁用
      type: boolean
      default: false
    }
  }>()
  const { disabled } = props
  const previewData = ref<any>([])
  const newArr = ref([])
  const uId = ref()
  const ZWMatericalLibRef: any = ref(null)
  const BatchLabelRef = ref(null)
  const emojiVisible = ref(false)
  const fileList = ref([])
  const fileInfo = ref([])
  const formParams = ref([])
  const attachment = ref([])
  const localUploadLink1: any = ref([])
  const localUploadLink2: any = ref([])
  const localContent = ref([])
  const localLink = ref([])
  const multipleTable = ref()
  const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' },
    { id: '7', icon: '/static/file/form.png', name: '收集表' },
    { id: '8', icon: '/static/file/shop.png', name: '电商' }
  ])

  //获取文件类型
  const onURL = (data: any) => {
    let fileTYpe = {
      '.pdf': '/static/file/pdf.png',
      '.doc': '/static/file/doc.png',
      '.docx': '/static/file/doc.png',
      '.xls': '/static/file/xls.png',
      '.xlsx': '/static/file/xls.png',
      '.ppt': '/static/file/ppt.png',
      '.pptx': '/static/file/ppt.png'
    }
    if (data) {
      const last = data.substring(data.lastIndexOf('.'))
      return fileTYpe[last] || '/static/file/file.png'
    }
  }
  const tableData = ref([]) //已有欢迎语数据
  const seleItem = ref({ id: '' }) // 选中的欢迎语数据
  // from 表单收集的数据
  const formData = ref({
    welcome_flag: '', // 是否设置欢迎语
    welcome_type: '', // 选择欢迎语
    content: '', // 欢迎语文本
    time_welcome_flag: '', // 是否选择分段欢迎语
    user_id: []
  })

  //表情包管理
  const chooseEmoji = (emoji: any) => {
    if (disabled) return
    //事件。数据包含文本区域的值
    formData.value.content = formData.value.content + emoji
    emojiVisible.value = false
    previewData.value[0] = {
      type: 0,
      content: formData.value.content
    }
  }
  // 删除上传的文件
  const remove = (id: any) => {
    if (disabled) return
    console.log(id)
    previewData.value = previewData.value.filter((item: any) => item.id !== id)
    formParams.value = formParams.value.filter((item: any) => item.media_content_id != id)
    localContent.value = localContent.value.filter((item: any) => item.code != id)
    localLink.value = localLink.value.filter((item: any) => item.link_url != id)
  }
  //打开上传文件弹框
  const openUpload = (num: string) => {
    if (disabled) return
    ZWMatericalLibRef.value.materVisible = true
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length) //打开对应的基础素材
    console.log(Number(9 - fileList.value.length), '上传搜索===fileList.value.length')
  }
  // 插入名字
  const insetName = () => {
    if (disabled) return
    formData.value.content += '##客户姓名## '
    previewData.value[0] = {
      type: 0,
      content: formData.value.content
    }
  }

  const onFace = () => {
    if (disabled) return
    emojiVisible.value = !emojiVisible.value
  }
  //更改欢迎语
  const changeWords = () => {
    previewData.value[0] = {
      type: 0,
      content: formData.value.content
    }
    emit('submit', previewData.value[0].content)
  }
  const onType = (v: any) => {
    console.log(v.content_id)

    if (v.content_id) {
      formData.value.welcome.attachment.push({
        type: v.type,
        media_content_id: v.content_id
      })
    } else {
      formData.value.welcome.local_content.push({
        type: v.type,
        code: v.media_file?.code
      })
    }
    switch (v.type) {
      case 1: // 图片
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file?.code,
          cur_icon: '/static/file/pic.png',
          name: v.media_file?.name,
          absolute_url: v.media_file?.absolute_url
        })
        break
      case 2: // 视频
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file?.code,
          cur_icon: '/static/file/mov.png',
          name: v.media_file?.name,
          thumbnail_url: `${v.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
        })
        break
      case 3: // 链接
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file?.code,
          cur_icon: '/static/file/link.png',
          name: v.link_title,
          desc: v.link_decs,
          cover_image_url: v.link_share_image
        })
        break
      case 4: // 音频
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file?.code,
          cur_icon: '/static/file/mp3.png',
          name: v.media_file?.name
        })
        break
      case 5: // 文件
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file?.code,
          cur_icon: onURL(v.media_file?.url),
          name: v.media_file?.name
        })
        break
    }
  }
  const onLocalType = (v: any) => {
    console.log(v.type)
    v.type = +v.type
    if (v.local) {
      switch (v.type) {
        case 2: // 图片
          previewData.value.push({
            type: 1,
            id: v.data[0]?.code,
            cur_icon: '/static/file/pic.png',
            name: v.data[0]?.name,
            absolute_url: v.data[0]?.url
          })
          formData.value.welcome.local_content.push({
            type: 1,
            code: v.data[0]?.code
          })
          break
        case 3: // 音频
          previewData.value.push({
            type: 4,
            id: v.data[0]?.code,
            cur_icon: '/static/file/mp3.png',
            name: v.data[0]?.name
          })
          formData.value.welcome.local_content.push({
            type: 4,
            code: v.data[0]?.code
          })
          break
        case 5: // 文件
          previewData.value.push({
            type: 5,
            id: v.data[0]?.code,
            cur_icon: onURL(v.media_file?.url),
            name: v.data[0]?.name
          })
          formData.value.welcome.local_content.push({
            type: 5,
            code: v.data[0]?.code
          })
          break
        case 4: // 视频
          previewData.value.push({
            type: 2,
            id: v.data[0]?.code,
            cur_icon: '/static/file/mov.png',
            name: v.data[0]?.name,
            thumbnail_url: `${v.data[0]?.url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
          })
          formData.value.welcome.local_content.push({
            type: 2,
            code: v.data[0]?.code
          })
          break
        case 6: // 链接
          previewData.value.push({
            type: 3,
            id: v.data[0]?.link_url,
            cur_icon: '/static/file/link.png',
            name: v.data[0]?.title,
            desc: v.data[0]?.link_desc,
            cover_image_url: v.data[0]?.cover_image_url
          })
          formData.value.welcome.local_link.push({
            link_title: v.data[0]?.title,
            link_url: v.data[0]?.link_url,
            link_desc: v.data[0]?.link_desc,
            link_share_image: v.data[0]?.cover_image_url
          })
          break
      }
    } else {
      switch (v.typeStr) {
        case 1: // 文本
        case 'text': // 文本
          let arr = [...new Set(v.data)]
          arr.forEach((item: any) => {
            formData.value.welcome.content += item.content
            previewData.value[0] = {
              type: 0,
              content: formData.value.welcome.content
            }
          })
          break
        case 2: // 图片
        case 'image': // 图片
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 1,
              id: item.id,
              cur_icon: '/static/file/pic.png',
              name: item.file_name,
              user_name: item.user_name,
              absolute_url: item.absolute_url
            })
            formData.value.welcome.attachment.push({
              type: 1,
              media_content_id: item.id
            })
          })
          break
        case 4: // 视频
        case 'video': // 视频
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 2,
              id: item.id,
              cur_icon: '/static/file/mov.png',
              name: item.file_name,
              user_name: item.user_name,
              thumbnail_url: item.thumbnail_url
            })
            formData.value.welcome.attachment.push({
              type: 2,
              media_content_id: item.id
            })
          })
          break
        case 6: // 链接
        case 7: // 链接
        case 'link': // 链接
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 3,
              id: item.id,
              cur_icon: '/static/file/link.png',
              name: item.title,
              desc: item.desc,
              user_name: item.user_name,
              cover_image_url: item.cover_image_url
            })
            formData.value.welcome.attachment.push({
              type: 3,
              media_content_id: item.id
            })
          })
          break
        case 3: // 音频
        case 'audio': // 音频
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 4,
              id: item.id,
              cur_icon: '/static/file/mp3.png',
              name: item.file_name,
              user_name: item.user_name
            })
            formData.value.welcome.attachment.push({
              type: 4,
              media_content_id: item.id
            })
          })
          break
        case 5: // 文件
        case 'file': // 文件
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 5,
              id: item.id,
              cur_icon: onURL(item.mediaFileInfo?.name),
              name: item.mediaFileInfo?.name,
              user_name: item.user_name
            })
            formData.value.welcome.attachment.push({
              type: 5,
              media_content_id: item.id
            })
          })
          break
      }
    }
  }
  // 获取选择的信息
  const getMaterlib = (res: any) => {
    if (res.data.length + formParams.value.length > 8) {
      ElMessage.error('最多只能上传8个素材,请删除后再上传')
      return
    }
    console.log(res, '选择已有素材确认')
    onLocalType(res)
    //  1图片 2视频 3链接 4音频 5文件
    if (!res.local) {
      // 在线素材
      res?.data?.forEach((item: any) => {
        // 文本
        if (res.type == 1) {
          formData.value.content = item.content
          previewData.value[0] = {
            type: 0,
            content: item.content
          }
        }
        // 图片
        if (res.type == 2) {
          item = { ...item, type: 1 }
          fileList.value.push(item)
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/pic.png', name: item.title })
          formParams.value.push({ type: item.type, media_content_id: item.id, media_file_id: 0 })
        }
        // 音频
        if (res.type == 3) {
          item = { ...item, type: 4 }
          fileList.value.push({ ...item, cur_icon: '/static/file/mp3.png' })
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/mp3.png', name: item.title })
          formParams.value.push({ type: item.type, media_content_id: item.id, media_file_id: 0 })
        }
        // 视频
        if (res.type == 4) {
          item = { ...item, type: 2 }
          fileList.value.push(item)
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/mov.png', name: item.title })
          formParams.value.push({ type: item.type, media_content_id: item.id, media_file_id: 0 })
        }
        // 文件
        if (res.type == 5) {
          console.log(item.mediaFileInfo.url, '文件')
          fileList.value.push({ ...item.mediaFileInfo, id: item.id, title: item.title, type: item.type })
          fileInfo.value.push({ id: item.id, cur_icon: onURL(item.mediaFileInfo.url), name: item.title })
          formParams.value.push({ type: item.type, media_content_id: item.id, media_file_id: 0 })
        }
        // 链接
        if (res.type == 6) {
          item = { ...item, type: 3 }
          fileList.value.push(item)
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/link.png', name: item.title })
          formParams.value.push({ type: item.type, media_content_id: item.id, media_file_id: 0 })
        }
      })
    } else {
      if (res.type != 6) {
        const { code, url, name } = res.data[0]
        // 图片
        if (res.type == 2) {
          localContent.value.push({ code, type: 1 })
          fileInfo.value.push({ id: code, cur_icon: '/static/file/pic.png', name: name })
          fileList.value.push({ id: code, absolute_url: url, name: name, type: 1 })
        }
        // 音频
        if (res.type == 3) {
          localContent.value.push({ code, type: 4 })
          fileList.value.push({ id: code, cur_icon: '/static/file/mp3.png', type: 4 })
          fileInfo.value.push({ id: code, cur_icon: '/static/file/mp3.png', name: name })
        }
        // 视频
        if (res.type == 4) {
          localContent.value.push({ code, type: 2 })
          fileInfo.value.push({ id: code, cur_icon: '/static/file/mov.png', name: name })
          fileList.value.push({ id: code, thumbnail_url: `${url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`, name: name, type: 2 })
        }
        // 文件
        if (res.type == 5) {
          localContent.value.push({ code, type: 5 })
          fileList.value.push({ id: code, cur_icon: url, title: name, name: name, type: 5 })
          fileInfo.value.push({ id: code, cur_icon: onURL(url), name: name })
        }
      } else {
        const { cover_image_url, link_url, title, link_desc } = res.data[0]
        localLink.value.push({ link_title: title, link_url: link_url, link_decs: link_desc, link_share_image: cover_image_url })
        fileList.value.push({ id: link_url, cover_image_url: cover_image_url, title: title, type: 3 })
        fileInfo.value.push({ id: link_url, cur_icon: '/static/file/link.png', name: title })
      }
    }
  }

  // 获取已有素材文件列表
  const getChannelFriendList = (data?: any) => {
    channelFriendList({
      page: 1,
      page_size: data?.page_size || 15,
      ...data
    }).then((res: any) => {
      tableData.value = res.data
      store.dispatch('pageTotal', res.total)
    })
  }
  // 选择已有素材取消
  const cancelHandel = () => {
    appDialog.visible = false
  }
  // 选择已有素材确认
  const submitHandel = () => {
    fileList.value = []
    fileInfo.value = []
    formParams.value = []
    console.log(seleItem.value, '选择已有素材确认')
    const { welcome_friend_attachment, content } = seleItem.value
    fileList.value[0] = {
      type: 0,
      content: content
    }
    formData.value.content = content
    welcome_friend_attachment.forEach((item) => {
      if (item.type != 3) {
        formParams.value.push({ type: item.type, media_content_id: item.content_id, media_file_id: 0 })
        // 图片
        if (item.type == 1) {
          fileList.value.push({ ...item.media_file, id: item.content_id, type: item.type })
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/pic.png', name: item.media_file.name })
        }
        // 视频
        if (item.type == 2) {
          fileList.value.push({ id: item.content_id, type: item.type, thumbnail_url: `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast` })
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/mov.png', name: item.media_file.name })
        }
        // 音频
        if (item.type == 4) {
          fileList.value.push({ id: item.content_id, type: item.type, title: item.media_file.name, cur_icon: '/static/file/mp3.png' })
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/mp3.png', name: item.media_file.name })
        }
        // 文件
        if (item.type == 5) {
          fileList.value.push({ id: item.content_id, type: item.type, title: item.media_file.name, type: item.type })
          fileInfo.value.push({ id: item.content_id, cur_icon: onURL(item.media_file.url), name: item.media_file.name })
        }
      } else {
        formParams.value.push({ type: item.type, media_content_id: item.content_id, media_file_id: 0 })
        fileList.value.push({ ...item.media_content_link, id: item.content_id, type: item.type, title: item.media_content_link?.link_title })
        fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/link.png', name: item.media_content_link?.link_title })
      }
    })
    cancelHandel()
  }

  // 选择已有欢迎语
  const already = (data?: any) => {
    getChannelFriendList()
    appDialog.visible = true
  }
  // 单选欢迎语
  const handleCurrentChange = (selection: any) => {
    seleItem.value = selection
  }
  // 弹框配置项
  const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
  })

  const getLook = (data) => {
    console.log(data, '查看父组件传递过来的数据')
    data?.welcome_attachment.forEach((item) => {
      // 在线素材
      if (item.type != 3) {
        if (item.content_id != 0) {
          // 在线素材
          formParams.value.push({ type: item.type, media_content_id: item.content_id, media_file_id: 0 })
        } else {
          // 本地素材
          formParams.value.push({ type: item.type, media_content_id: 0, media_file_id: item.file_id })
        }
        if (item.type == 1) {
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/pic.png', name: item.media_file.name })
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id })
        }
        // 视频
        if (item.type == 2) {
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/mov.png', name: item.media_file.name })
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id, thumbnail_url: `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast` })
        }

        // 音频
        if (item.type == 4) {
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/mp3.png' })
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/mp3.png', name: item.media_file.name })
        }
        // 文件
        if (item.type == 5) {
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id })
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: onURL(item.media_file.url), name: item.media_file.name })
        }
      } else {
        // 链接
        if (item.content_id) {
          formParams.value.push({ type: item.type, media_content_id: item.content_id, media_file_id: 0 })
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/link.png', name: item.link_title, title: item.link_title })
          fileList.value.push({ ...item.media_content_link, type: item.type, id: item.content_id, title: item.link_title })
        } else {
          localLink.value.push({ link_title: item.link_title, link_url: item.link_url, link_decs: item.link_decs, link_share_image: item.link_share_image })
          fileInfo.value.push({ id: item.link_url, cur_icon: '/static/file/link.png', name: item.link_title, title: item.link_title })
          fileList.value.push({ id: item.link_url, cover_image_url: item.link_share_image, type: item.type, title: item.link_title })
        }
      }
    })
  }
  watch(
    () => formData.value.content,
    (newV, oldV) => {
      if (formData.value.content.length <= 1000) {
        changeWords()
      } else {
        formData.value.content = oldV
      }
    },
    { immediate: true }
  )
  defineExpose({
    fileList,
    attachment,
    localUploadLink1,
    localUploadLink2,
    formParams,
    localContent,
    localLink,
    already,
    formData,
    newArr,
    getLook,
    changeWords
  })
</script>

<style lang="scss" scoped>
  .pop_select_box {
    height: 84px;
    .upload_btn {
      margin-top: 8px;
    }
    .upload_pop {
      background: #ffffff;
      border-radius: 12px;
      // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item_pop {
        width: 60px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        .item_pop_icon {
          width: 40px;
        }
        .item_pop_name {
          font-size: 14px;
          margin-top: 2px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
        }
      }
    }
  }
  .welcome {
    width: 100%;
    .el-form-item {
      margin-bottom: 0px;
    }
    .create {
      display: flex;
      justify-content: space-between;
      // padding-bottom: 100px;
      .list_item {
        // padding-left: 18px;
        padding-right: 132px;
        border-right: 1px solid #eaeaea;
        .item_title {
          font-size: 14px;
          line-height: 18px;
          font-family: STHeitiSC-Medium, STHeitiSC;
          font-weight: 500;
          color: #33302d;
          margin-bottom: 16px;
          .title_icon {
            display: block;
            height: 18px;
            width: 3px;
            background: #ff6b00;
            float: left;
            margin-left: -15px;
          }
        }
        .item_con_input {
          width: 470px;
        }
        .item_con {
          .radio_group {
            margin-right: 15px;
          }
          .cus_type_0 {
            margin-top: 20px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            span {
              color: #ff6b00;
            }
          }
          .form_cus_type {
            margin-top: 5px;
            .el-form-item__content {
              .form_item_input {
                .el-input__inner {
                  width: 253px !important;
                }
              }
            }
          }
          .input_textarea {
            width: 100%;
            :deep(.el-textarea__inner) {
              height: 170px;
              background: #f8f8f8;
              border: 0;
              box-shadow: none;
              border-bottom: 1px solid #eaeaea;
              padding: 5px 0 0 12px;
            }
          }
        }
        .item_message_box {
          background: #f8f8f8;
          border: 1px solid #eaeaea;
          border-radius: 4px;
          width: 580px;
          height: 406px;
          position: relative;
          .simple_fn {
            margin-top: 5px;
            padding-left: 12px;
            display: flex;
            align-items: center;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            padding-bottom: 6px;
            border-bottom: 1px solid #eaeaea;
            .cus_name {
              margin-right: 18px;
              color: #ff6b00;
              cursor: pointer;
            }
            .emoj {
              margin-left: 5px;
              cursor: pointer;
            }
            .sele_text {
              cursor: pointer;
            }
            .item_num {
              margin-left: 322px;
            }
          }
          .upload_list_box {
            overflow: hidden;
            height: 135px;
          }
          .upload_list {
            .upload_item {
              margin-top: 5px;
              width: 440px;
              height: 32px;
              box-sizing: border-box;
              background: #eaeaea;
              display: flex;
              padding: 0px 10px 0px 14px;
              align-items: center;
              .file_icon {
                width: 20px;
                height: 20px;
                margin-right: 7px;
              }
              .file_name {
                width: 375px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .del_icon {
                width: 10px;
                height: 10px;
                cursor: pointer;
              }
            }
          }
          .upload_btn {
            margin-top: 8px;
            margin-left: 12px;
            width: 260px;
            height: 32px;
            background: #f8f8f8;
            border: 1px solid #d9d9d9;
            padding: 0 12px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #969696;
            .upload_text {
              margin-left: 8px;
            }
          }
          .upload_pop {
            position: absolute;
            bottom: 50px;
            left: -20px;
            width: 360px;
            height: 84px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
            display: flex;
            align-items: center;
            justify-content: space-around;
            .item_pop {
              width: 60px;
              height: 62px;
              background: #ffffff;
              border-radius: 6px;
              border: 1px solid #f9f9f9;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              cursor: pointer;
              .item_pop_icon {
                width: 40px;
              }
              .item_pop_name {
                font-size: 14px;
                margin-top: 2px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1a1918;
              }
            }

            &::after {
              content: '';
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%);
              width: 0;
              height: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-top: 10px solid #fff;
            }
          }
          .emoj_box {
            width: 270px;
            position: absolute;
            top: -40px;
          }
        }
      }
      .prev_box {
        flex: 1;
        .phone_con {
          // justify-content: center;
          position: relative;
          margin: -20px auto;
          width: 244px;
          height: 495px;
          box-sizing: border-box;
          border-radius: 36px;
          border: 9px solid #eef5fe;
          background: url('@/assets/image/channel/phone_bg.png');
          background-size: cover;
          .phone-title {
            position: absolute;
            top: -40px;
            left: 75px;
          }
          .phone_List {
            width: 100%;
            box-sizing: border-box;
            position: absolute;
            top: 48px;
            height: 380px;
            bottom: 48px;
            padding: 7px 10px;
          }
        }
      }
    }
    .timeTitle {
      display: flex;
      align-items: center;
      background: #fffaf9;
      width: 580px;
      line-height: 40px;
      padding: 0 20px;
      margin-bottom: 23px;
      &_icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff6b00;
        margin-right: 10px;
      }
    }
    .addTime {
      width: 80px;
      text-align: center;
      color: #969696;
      font-size: 14px;
      line-height: 36px;
      border: 1px solid #eaeaea;
      box-shadow: 0px 4px 4px 1px rgba(240, 240, 240, 0.5);
      border-radius: 1px 1px 1px 1px;
      cursor: pointer;
      margin: -60px 0px 0 20px;
    }
    .code {
      width: 260px;
      height: 260px;
      background: #ffffff;
      box-shadow: 0px 12px 48px 1px rgba(0, 0, 0, 0.03);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #eaeaea;
      margin-right: 25px;
    }
    .form_upload {
      display: flex;
      align-items: flex-end;
    }
    .warn {
      color: #969696;
      font-size: 12px;
    }
    .form_btn {
      display: flex;
      justify-content: center;
    }
  }
</style>
